<template>
  <div class="i-box">
    <nav-bar>
      <div slot="middle">理财计算</div>
      <img class="top-back-icon" src="@res/img/common_back.png" alt="" slot="left" @click="back">
    </nav-bar>

    <div class="gi-radios">
      <div class="gi-radio-item">
        <input type="radio" id="type1" name="love" v-model="type" value="0">
        <label for="type1">整存整取</label>
      </div>
      <div class="gi-radio-item">
        <input type="radio" id="type2" name="love" v-model="type" value="1">
        <label for="type2">复利计算</label>
      </div>
      <div class="gi-radio-item">
        <input type="radio" id="type3" name="love" v-model="type" value="2">
        <label for="type3">定投计算</label>
      </div>
    </div>
    <div class="i-content">
      <input-item>
        <p slot="name">当前本金</p>
        <input class="tit-input" id="base" name="base" type="number" slot="input" v-model="base"
               @input="base=$_numberUtil.checkPosNumber(base)">
        <p slot="right">元</p>
      </input-item>
      <input-item>
        <p slot="name">每期利率</p>
        <input class="tit-input" id="rate" name="rate" type="number" slot="input" v-model="rate"
               @input="rate=$_numberUtil.checkPosNumber(rate)">
        <p slot="right">%</p>
      </input-item>
      <input-item v-show="type!=='0'">
        <p slot="name">总期数</p>
        <input class="tit-input" id="times" name="times" type="number" slot="input" v-model="times"
               @input="times=$_numberUtil.checkPosNumber(times)">
        <p slot="right">期</p>
      </input-item>


      <input-item v-show="type==='2'">
        <p slot="name">每期定投</p>
        <input class="tit-input" id="added" name="added" type="number" slot="input" v-model="added"
               @input="added=$_numberUtil.checkPosNumber(added)">
        <p slot="right">元</p>
      </input-item>


      <submit-button class="i-submit" @submit="submit" tip="开始计算"></submit-button>

      <div v-show="showResult">
        <div class="i-result">
          累计本金: {{totalBase}}
        </div>
        <div class="i-result">
          总利息: {{totalRate}}
        </div>
        <div class="i-result">
          累计本息: {{totalMoney}}
        </div>
      </div>


    </div>
  </div>
</template>

<script>
  import NavBar from "@/components/common/NavBar";
  import InputItem from "@/components/common/InputItem";
  import SubmitButton from "@/components/common/SubmitButton";

  export default {
    name: "Deposit",
    data() {
      return {
        base: 0,//本金
        rate: 0,//利率
        times: 1,//期数
        added: 0,//定投,
        type: '0',//整存整取，复利计算，定投计算
        totalBase: 0,//累计本金
        totalRate: 0,//总利息
        totalMoney: 0,//本息之和,
        showResult:false
      }
    },
    components: {
      NavBar,
      InputItem,
      SubmitButton,
    },
    methods: {
      back() {
        this.$router.back()
      },
      submit() {
        let base = parseFloat(this.base)
        let rate = parseFloat(this.rate)
        let times = parseFloat(this.times)
        let added = parseFloat(this.added)
        let tip = ''
        if (isNaN(base) || base < 0 || base > 1000000000) {
          tip = '本金输入有问题，请检查'
        }
        if (isNaN(rate) || rate < 1 || rate > 100) {
          tip = '利率输入有问题，请检查'
        }
        if (isNaN(times) || times < 1 || times > 10000) {
          tip = '总期数输入有问题，请检查'
        }
        if (isNaN(added) || added < 0 || added > 1000000000) {
          tip = '定投金额输入有问题，请检查'
        }
        if (tip.length > 1) {
          this.$createToast({
            time: 2000,
            type: 'text',
            txt: tip,
          }).show()
          return
        }
        this.showResult = true
        switch (this.type) {
          case '0':
            this.calculate1(base,rate)
            break
          case '1':
            this.calculate2(base,rate,times)
            break
          case '2':
            this.calculate3(base,rate,times,added)
            break
        }
      },
      calculate1(base,rate,times,added) {
        this.totalBase =  this.$_numberUtil.keepTwoDecimal(base)
        this.totalRate =  this.$_numberUtil.keepTwoDecimal(base * rate/100)
        this.totalMoney =  this.$_numberUtil.keepTwoDecimal(base * (1+rate/100))
      },
      calculate2(base,rate,times,added) {
        this.totalMoney =this.$_numberUtil.keepTwoDecimal(base*Math.pow((1+rate/100),times))
        this.totalBase =  this.$_numberUtil.keepTwoDecimal(base)
        this.totalRate =  (this.totalMoney-this.totalBase).toFixed(2)
      },
      calculate3(base,rate,times,added) {
        this.totalBase = base+(added * times)
        let tmp = base//每期本金
        for(let i=0;i<times;i++){
          tmp = this.$_numberUtil.keepTwoDecimal(added+tmp * (1+rate/100))
        }
        this.totalMoney=tmp
        this.totalRate =  (this.totalMoney-this.totalBase).toFixed(2)
      }
    },
  }
</script>

<style scoped>
  .tit-input {
    text-align: right;
    border: none;
    width: 100%;
  }

  .i-result {
    height: 3rem;
    line-height: 3rem;
    text-align: left;
    padding-left: 2rem;
    font-weight: bold;
    font-size: 1.6rem;
  }

</style>

